<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div  class="wb-grasp-doll" >
        <div class="doll" ref="doll"><img :src="commonAttr.dollUrl"></div>
        <div class="pole" ref="pole"></div>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { MOBILE_WID_HEI } from '@/common/const-dif'
import { EventBus } from '@/store/index'
import { getPxOVwByValue } from '@/store/utils'

export default {
  name: 'WbGraspDoll',
  mixins: [utils, commonUtils],
  components: {
    InjectTemplate,
  },
  created(){
    if(!window.gsap){
      this.dynamicsLoadScript(this.env.baseUrl + "js/gsap/gsap.min", "gsap", this.initMachinePosition)
    }
    let cssVars = ['--pole-width', '--pole-height', '--paw-width', '--paw-height', '--doll-width', '--doll-height'];
    let urls = [this.commonAttr.poleUrl, this.commonAttr.pawUrl, this.commonAttr.dollUrl];

    _.forEach(urls, (url, index) => {
      let img = new Image();
      img.onload = (e) => {
        let wid = e.target.naturalWidth;
        let hei;
        if(cssVars[index*2+1] == "--doll-height"){
          hei = -e.target.naturalHeight;
        }else{
          hei = e.target.naturalHeight;
        }

        if(cssVars[index*2+1] == "--paw-height"){
          document.documentElement.style.setProperty(`--paw-bottom`, getPxOVwByValue(-hei));
        }
        document.documentElement.style.setProperty(cssVars[index*2], getPxOVwByValue(wid));
        document.documentElement.style.setProperty(cssVars[index*2+1], getPxOVwByValue(hei));
      };
      img.src = url;
    })

    EventBus.$on("graspDoll", this.moveMachine);
  },
  mounted(){
    this.initMachinePosition(window.gsap);
  },
  methods: {
    initMachinePosition(gsap){
      if(!gsap){
        return
      }
      let poleHeight = this.commonAttr.poleHeight ? this.commonAttr.poleHeight : 100;
      gsap.to(".pole", { duration: 0.1, height: poleHeight });
      
      if(!this.isH5Edit){
        let clientWidth = document.documentElement.clientWidth;
        let width_ = this.item.conAttr.width/MOBILE_WID_HEI.designScale;
        let wid = clientWidth - width_/2;
        gsap.to(".wb-grasp-doll", { 
          duration: 0.1, 
          x: () => {
            return gsap.utils.random(width_/2, wid, 1);
          },
        });
      }
    },
    moveMachine(){
      const tl = window.gsap.timeline(); 
      tl.to(".pole", { duration: 2, height: 300 })
        .to(".wb-grasp-doll", { duration: 1, x: window.innerWidth/2 }, "+=0.5")
        .to(".pole", { duration: 1, height: 100 }, "+=0.5")
    }
  },
  beforeUnmount(){
    EventBus.$off("graspDoll", this.moveMachine);
  }
};
</script>

<style lang="scss">
:root {
  --pole-width: 38px;
  --pole-height: 200px;

  --paw-width: 310px;
  --paw-height: 177px;
  --paw-bottom: -177px;

  --doll-width: 298px;
  --doll-height: -226px;
  --doll-visible: hidden;

  --pole-url: url(https://static.hd.xxx.com/upload/biz/14/18695418_350.png);
  --paw-url: url(https://static.hd.xxx.com/upload/biz/14/95487923_350.png);
}

.wb-grasp-doll {
  position: relative;

  .pole {
    position: relative;
    width: var(--pole-width);
    height: var(--pole-height);
    background-image: var(--pole-url);
    background-repeat: repeat-y;
  }
  .pole:after{
    position: absolute;
    bottom: var(--paw-bottom);
    left: 50%;
    transform: translateX(-51.5%);
    background-size: contain;
    width: var(--paw-width);
    height: var(--paw-height);
    background-image: var(--paw-url);
    content: ' ';
  }
  .doll{
    position: absolute;
    bottom: var(--doll-height);
    transform: translateX(-50%);
    width: var(--doll-width);
    visibility: var(--doll-visible);
  }
  .doll img{
    width: 100%;
    height: auto;
  }
}
</style>
